import Button from 'src/components/Button'
import Section1 from './components/Section1'
import Section2 from './components/Section2'
import Section3 from './components/Section3'
import './index.scss'

export default function Home() {
  
  return (
    <div className="home_wrapper">
      <div className="banner">
        <div className="title">React 知命境</div>
        <div className="desciption">深挖基础，聚焦实践，全新学习方式，助力开发者成为更专业的 React 使用者</div>
        <div className="btn-container">
          <Button type='primary' size='large'>开始学习</Button>
        </div>
      </div>

      <Section1 />
      <Section2 />
      <Section3 />


      <section className="part4">
        <div className="title">付费进阶，更进一步</div>
        <div className="desciption">掌握资深前端的使用法则，成为更强的开发者</div>
        <div className="inner">
          <div className="base">
            <div className="base-container">
              React 哲学
            </div>
          </div>
          <div className="base">
            <div className="base-container">
              手写 Ant Design 组件
            </div>
          </div>
          <div className="base">
            <div className="base-container">
              大型企业级数字化项目实践
            </div>
          </div>
        </div>
      </section>

      <footer>
        <div className="auther">@copyright 这波能反杀</div>
        <div className="desc">React 知命境官方网站</div>
      </footer>
      {/* <div className="feed">
        {articles.map((article) => (
          <div className="article" key={article.id}>
            <div className="top">
              <div className="left">
                <div className="icon_wrap" style={{ backgroundColor: '#3276d6' }}>
                  <Icon type='react' color='#FFF' />
                </div>
                <div className="author">{article.type}</div>
                <div className="time">{article.time}</div>
              </div>

              <div className="right"></div>
            </div>

            <div className="title">{article.name}</div>

            <div className="bottom">
              <div className="left">
                <div className="label">React</div>
                <div className="label">js</div>
                <div className="label">知命境</div>
                #React 知命境
              </div>

              <div className="right">
                <div className="url">知乎</div>
                <div className="url">掘金</div>
                <div className="url">公众号</div>
              </div>
            </div>
          </div>
        ))}
      </div> */}
    </div>
  )
}
